<template>
	<view class="select-date-box bg-white flex-row" @click="slectPicker">
		<view class="date-picker-box flex-row">
			<view class="start-time-box" :class="{ 'has-end-time': endTime }">
				<dyDatePicker
					:timeType="timeType"
					@getData="getStartTime"
					@cancelTimeChange="startCancelTime"
					placeholder="请选择日期"
					minSelect="2017/01/01"
					maxSelect="2025/12/31"
				/>
			</view>
			<text v-if="endTime">–</text>
			<view class="end-time-box" v-if="endTime">
				<dyDatePicker
					:timeType="timeType"
					@getData="getEndTime"
					@cancelTimeChange="endCancelTime"
					placeholder="请选择日期"
					minSelect="2017/01/01"
					maxSelect="2025/12/31"
				/>
			</view>
		</view>
		<view class="uni-select has-icons-s"><view class="uni-icons" :class="showTopIcons ? 'uniui-top' : 'uniui-bottom'"></view></view>
	</view>
</template>

<script>
import dyDatePicker from '../dy-Date/dy-Date.vue';
export default {
	name: 'select-date',
	components: {
		dyDatePicker
	},
	props: {
		timeType: {
			type: String,
			default: function() {
				return 'month'; //日期控件类型：year	：年、month：月份、day:天、quarter:季度  暂定还没开发好
			}
		},
		startTime: '',
		endTime: ''
	},
	data() {
		return {
			showTopIcons: false,
		};
	},
	methods: {
		getStartTime(time) {
			this.showTopIcons = false;
			this.$emit('getStartT', time);
		},
		getEndTime(time) {
			this.showTopIcons = false;
			this.$emit('getEndT', time);
		},
		slectPicker() {
			this.showTopIcons = true;
		},
		startCancelTime(time) {
			this.showTopIcons = false;
			// this.$emit('getStartT', time);
		},
		endCancelTime(time) {
			this.showTopIcons = false;
			// this.$emit('getEndT', time);
		}
	}
};
</script>

<style lang="scss" scoped>
.select-date-box {
	width: 100%;
	height: 70rpx;
	line-height: 70rpx;
	border: 1px solid #d7d7d7;
	box-sizing: border-box;
	font-family: PingFangSC-Medium;
	font-size: 24rpx;
	color: #333333;
	font-weight: 500;
	padding-left: 6rpx;
	.date-picker-box {
		width: 286rpx;
		.start-time-box {
			width: 100%;
			&.has-end-time {
				width: 134rpx;
			}
		}
		.end-time-box {
			width: 142rpx;
			text-align: center;
		}
		.date-picker {
			width: 278rpx;
		}
		/deep/.uni-select {
			width: 0;
			border-width: 0;
			.uni-icons.uniui-bottom {
				margin-top: 18rpx;
			}
			.uni-icons.uniui-top {
				margin-bottom: 0;
				margin-top: 8rpx;
			}
		}
	}
	.uni-select.has-icons-s {
		width: 8rpx !important;
		border-width: 0 !important;
		height: 46rpx !important;
		line-height: 46rpx !important;
		padding-top: 12rpx;
	}
}
</style>
